
import { FC, Suspense } from 'react'
// import * as Type from './utils/index'
import { BrowserRouter, Route, Routes, Navigate, HashRouter } from 'react-router-dom'

type ModeType = "history|hash"

type Props = {
  routes: Router1,
  mode?: ModeType
}

const Routerview: FC<Props> = ({ routes }) => {
  const render = (arr: Router1) =>
    arr && arr.map((item, index) =>
      <Route
        key={index} path={item.path} element={item.to ? <Navigate to={item.to}/>:<item.element/>}
      >
        {
          item.children && render(item.children)
        }
      </Route>
    )
  return (
    <Suspense>
      <Routes>
        {
          render(routes)
        }
      </Routes>
    </Suspense>
  )
}
const App: FC<Props> = ({ routes, mode }) =>
  mode === 'history' ?
<BrowserRouter>
  <Routerview routes={routes}/>
</BrowserRouter>:
<HashRouter>
  <Routerview routes={routes}/>
</HashRouter>

export default App
